<template>
  <div>
    <!-- 年度开工率 -->
    <Echart
      id="bottomLeftChart"
      :options="options"
      height="280px"
      width="100%"
    />
  </div>
</template>

<script>
	import Echart from '@/common/echart'
	export default {
		components: {
			Echart,
		},
		props: {
			cdata: {
				type: Object,
				default: () => ({})
			},
		},
		data() {
			return {
				options: {},
			};
		},
		watch: {
			cdata: {
				handler(newData) {
					this.options = {
						tooltip: {
							trigger: "axis",
							backgroundColor: "rgba(255,255,255,0.1)",
							axisPointer: {
								type: "shadow",
								label: {
									show: true,
									backgroundColor: "#7B7DDC"
								}
							}
						},
						legend: {
							data: ["PAC", "气浮PAM", "脱水机PAM", "碳源", "次钠"],
							textStyle: {
								color: "#B4B4B4"
							},
							top: "0%"
						},
						grid: {
							x: "8%",
							width: "88%",
							y: "4%"
						},
						xAxis: {
							data: newData.category,
							axisLine: {
								lineStyle: {
									color: "#B4B4B4"
								}
							},
							axisTick: {
								show: false
							}
						},
						yAxis: [{
								splitLine: {
									show: false
								},
								axisLine: {
									lineStyle: {
										color: "#B4B4B4"
									}
								},
						
								axisLabel: {
									formatter: "{value} "
								}
							}
						],
						series: [{
								name: "PAC",
								type: "line",
								smooth: true,
								showAllSymbol: true,
								symbol: "emptyCircle",
								symbolSize: 8,
								yAxisIndex: 0,
								itemStyle: {
									normal: {
										color: "#e89b00"
									}
								},
								data: newData.lineData1
							},
							{
								name: "气浮PAM",
								type: "line",
								smooth: true,
								showAllSymbol: true,
								symbol: "emptyCircle",
								symbolSize: 8,
								yAxisIndex: 0,
								itemStyle: {
									normal: {
										color: "#00ea00"
									}
								},
								data: newData.lineData2
							},
							{
								name: "脱水机PAM",
								type: "line",
								smooth: true,
								showAllSymbol: true,
								symbol: "emptyCircle",
								symbolSize: 8,
								yAxisIndex: 0,
								itemStyle: {
									normal: {
										color: "#0086e8"
									}
								},
								data: newData.lineData3
							},
							{
								name: "碳源",
								type: "line",
								smooth: true,
								showAllSymbol: true,
								symbol: "emptyCircle",
								symbolSize: 8,
								yAxisIndex: 0,
								itemStyle: {
									normal: {
										color: "#ae91ff"
									}
								},
								data: newData.lineData4
							},
							{
								name: "次钠",
								type: "line",
								smooth: true,
								showAllSymbol: true,
								symbol: "emptyCircle",
								symbolSize: 8,
								yAxisIndex: 0,
								itemStyle: {
									normal: {
										color: "#ab00b5"
									}
								},
								data: newData.lineData5
							},
						]
					}
				},
				immediate: true,
				deep: true
			},
		},
	}
</script>
